<template>
  <view>

    <!-- 头部输入框开始 -->
    <view class="search">
      <!-- 头部输入框开始 -->
      <mySearch :name='item.name' @homePage="homeClick" @searchBtn="searchClick"></mySearch>
      <!-- 头部输入框结束 -->
    </view>
    <!-- 头部输入框结束 -->


    <!-- 图片操作区域开始 -->
    <view class="operation">
      <view class="operation-image">
        <image :src="image"></image>
      </view>
      <view class="operation-content">
        <view class="operation-icon">
          <!-- 举报 -->
          <navigator url="../report/report" class="operation-result">
            <text class="iconfont icon-jubao" style="font-size: 60rpx;"></text>
            <text>举报</text>
          </navigator>
          <!-- 使用说明 -->
          <navigator url="../../subpkg/instructions/instructions" class="operation-result">
            <text class="iconfont icon-dengpao" style="font-size: 60rpx;"></text>
            <text>使用说明</text>
          </navigator>
          <!-- 收藏 -->
          <view class="operation-result">
            <text class="iconfont icon-shoucang" style="font-size: 60rpx;"></text>
            <text>收藏</text>
          </view>
          <!-- 保存 -->
          <view class="operation-result" @click="save">
            <text class="iconfont icon-xiazai" style="font-size: 60rpx;"></text>
            <text>保存</text>
          </view>
          <!--赚积分  -->
          <navigator url="../task/task" class="operation-result">
            <text class="iconfont icon-shipin" style="font-size: 60rpx;"></text>
            <text>赚积分</text>
          </navigator>
        </view>
        <view class="operation-btn">
          <button class="btn" open-type="share">推荐标签</button>
          <text class="btn" style="font-size: 26rpx;">改图</text>
        </view>
      </view>
    </view>
    <!-- 图片操作区域结束 -->

    <!-- 广告区域开始 -->
    <view class="advertising">
      <image class="image" src="../../static/imag/123.png"></image>
    </view>
    <!-- 广告区域结束 -->

    <!-- 相关推荐开始 -->
    <view class="recommend">
      <!-- 标题文字 -->
      <view class="recommend-text">
        <text class="iconfont icon-search" style="font-size: 30rpx;"></text>
        <text>相关推荐</text>
      </view>
      <!-- 动态图片开始 -->
      <view class="recommend-content">
        <myPicture @isId="skipClick"></myPicture>
      </view>
    </view>
    <!-- 相关推荐结束 -->
  </view>
</template>

<script>
  import mySearch from "../../components/my-search/my-search.vue"
  import myPicture from '../../components/my-picture/my-picture.vue'
  export default {
    components: {
      mySearch,
      myPicture

    },
    data() {
      return {
        image: '' //
      };
    },
    onLoad(option) {
      console.log(option)
      this.image = option.url
      console.log(this.image)
    },
    methods: {
      skipClick(e) {
        uni.navigateTo({
          url: `../../subpkg/meme/meme`
        })
      },
      save() {
        // 点击保存
        uni.showModal({
          content: '观看30秒广告 获得3小时畅用特权海量表情包等你分享和下载',
          cancelText: '取消',
          confirmText: '确定',
          success: res => {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
              uni.showModal({
                content: '支付5.88元开通vip 获得永久免广告保存特权 海量表情包等你分享和下载',
                cancelText: '取消',
                confirmText: '确定',
                success: res => {
                  if (res.confirm) {
                    console.log('用户点击确定');
                  } else if (res.cancel) {
                    console.log('用户点击取消');
                  }
                }
              })
            }
          }
        })
      },
      // 点击首页回到第一个页面
      homeClick() {
        uni.switchTab({
          url: '../../pages/index/index'
        })
      },
      // 点击搜索
      searchClick() {
        console.log(11)
      }

    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;

  }

  .search {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
    background-color: #fdd201;
  }

  // 图片操作区域
  .operation {
    background-color: #fff;
    height: 780rpx;
    padding: 20 0rpx;
    padding: 20rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .operation-image {
      width: 480rpx;
      height: 480rpx;

      image {
        border-radius: 16rpx;
      }
    }

    .operation-content {
      width: 100%;
      height: 200rpx;
      margin-top: 30rpx;
      padding: 0 30rpx;

      .operation-icon {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .operation-result {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 30rpx;

          text:nth-child(1) {
            color: #fdd201;
          }


        }
      }

      .operation-btn {
        display: flex;
        margin-top: 30rpx;
        justify-content: center;

        .btn {
          display: block;
          width: 220rpx;
          height: 60rpx;
          font-size: 24rpx;
          background-color: #fdd201;
          border-radius: 30rpx;
          text-align: center;
          line-height: 60rpx;
          margin: 0 40rpx;

          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  // 广告区域
  .advertising {
    margin: 20rpx 30rpx;
    height: 240rpx;

    .image {
      border-radius: 16rpx;
    }
  }

  // 相关推荐
  .recommend {
    margin-top: 20rpx;
    background-color: #fff;

    .recommend-text {
      padding: 0 30rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #F5F5F5;

      text {
        margin-left: 10rpx;
      }
    }

    .recommend-content {
      padding: 0 30rpx;
    }
  }
</style>
